import { useState } from 'react';
import ReactJson from './react-json-view/dist/main';
import HighlightTextArea from '@/components/HighlightTextArea';

import styles from './index.less';

const JsonViewCom = ({ value }) => {
  const [json, setJson] = useState({});
  const my_json_object = {
    name: 'John',
    age: 30,
    car: null,
  };

  const propsVal = {
    name: false, // JSON数据的根节点(用默认或指定的根节点包裹自己的数据)
    src: my_json_object, // 需要展示的JSON数据
    style: {
      padding: 10,
      minHeight: '100px',
    },
    theme: 'rjv-default', // 支持base-16主题
    iconStyle: 'square', // circle(圆)、triangle(三角形)、square(正方形)
    indentWidth: 4, // 首行缩进长度
    collapsed: 2, // 节点折叠
    collapseStringsAfterLength: false, // 超出内容会变成…的功能
    displayDataTypes: true, // 数据类型会出现在数据的前缀值
    displayObjectSize: true, // 对象和数组被标记为大
  };

  return (
    <div className={styles.jsonViewBox}>
      {/* <ReactJson {...propsVal} />?? */}
      <HighlightTextArea highlightKeywords={['重要', '紧急']} />
    </div>
  );
};

export default JsonViewCom;
